/* ======================================================
   <!-- Dividing Line -->
/* ====================================================== */
@import '@uixkit/core/_global/scss/_variable-and-mixin.scss';

.uix-separator-base {
    display: block;
    clear: both;
    width: 100%;
    height: 0;
    border-top-width: thin;
    border-top-color: $dividing-line-color;
    border-top-style: solid;
    outline: none;
    margin: 1.5rem auto;

	&.uix-separator-base--solid {
		border-top-style: solid;
	}

	&.uix-separator-base--dashed {
		border-top-style: dashed;
	}

	&.uix-separator-base--dotted {
		border-top-style: dotted;
	}

	&.uix-separator-base--double {
		bborder-top-style: solid;
		border-bottom: 1px solid $dividing-line-color;
		height: 3px;
	}

	&.uix-separator-base--black {
		border-color: rgba(255,255,255,.1);
	}

}

.uix-separator-gradient {
    clear: both;
    display: block;
    width: 100%;
    margin: 1.5rem auto;
    position: relative;
    height: 1px;
    background: $dividing-line-color;
    background: linear-gradient(to right,rgba($dividing-line-color,0) 0,rgba($dividing-line-color,1) 35%,rgba($dividing-line-color,1) 70%,rgba($dividing-line-color,0) 100%);

	&.uix-separator-gradient--black {
		background: rgba(255,255,255,.1);
		background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 35%,rgba(255,255,255,.1) 70%,rgba(255,255,255,0) 100%);

	}


}

.uix-separator-shadow {
    clear: both;
    width: 100%;
    margin: 1.5rem auto;

	span {
		display: block;
		height: 20px;
		overflow: hidden;

		i {
			display: block;
			height: 25px;
			width: 100%;
			margin: -25px auto 0;
			content: '';
			border-radius: 10.41666667px;
			box-shadow: 0 0 8px $dividing-line-color;
		}
	}

	&.uix-separator-shadow--black {
		span {
			i {
				box-shadow: 0 0 8px rgba(255,255,255,.1);
			}
		}

	}


}
